<script setup>
import {reactive, ref} from 'vue'
import {getlogin} from '@/api/login.js'
import { useRouter } from 'vue-router'
import useToken from '@/stores/token'
import {User,Lock}from '@element-plus/icons-vue'
const router = useRouter() 
const fromdate = ref({
    username:'',
    password:''
})
const rules = reactive({
    username:[
        {required:true,message:'用户名不能为空',trigger:'blur'},
        { min: 3, max: 7, message: '用户名至少3位', trigger: 'blur' },
    ],
    password:[
    {required:true,message:'密码不能为空',trigger:'blur'},
    { min: 5, max: 10, message: '密码5到10位数', trigger: 'blur' }
    ]
})
let ruleFormRef = ref()
const loginbtn = async()=>{
    await ruleFormRef.value.validate()
    const { updateToken } = useToken()
    const token = await getlogin(fromdate.value)
    updateToken(token)
    router.push("/")
}
</script>
<template>
<div class="login-container">
   <div class="logo"></div>
    <div class="loginbox">
    <el-row class="box" :gutter="12">
    <el-col class="hread">
        <span><img src="../../assets/images/login-logo.png" alt=""></span>
        <h2>汇客CRM系统</h2>
    </el-col>
    <el-row class="form" style="width: 100%">
    <el-col>
    <el-form 
    :model="fromdate"
    ref="ruleFormRef"
    :rules="rules"
    >
    <el-form-item prop="username">
    <el-input :prefix-icon="User" v-model="fromdate.username" size="large" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
    <el-input :prefix-icon="Lock" type="password" v-model="fromdate.password" size="large" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item>
    <el-input size="large" placeholder="验证码"></el-input>
    <span class="YZM">验证码</span>
    </el-form-item>
    <el-form-item class="minilogin">
        <el-button type="primary"  round size="large" @click="loginbtn" style="width: 100%">进入</el-button>
    </el-form-item>
    </el-form>
    </el-col>
</el-row>
</el-row>
</div>
</div>
</template>
<style lang="less" scoped>
.login-container {
  display: flex;
  align-items: stretch;
  height: 98vh;
  .logo {
    flex: 4;
    background:url(../../assets/images/login-l.png) no-repeat center / cover;
    margin-right: 100px;
  }
.loginbox{
    flex: 2;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    padding-left: 50px;
    padding:0 31px 58 41px;
    .box{
        width: 70%;
        transform: translate(0,-20%);
        .hread{
            display: flex;
            justify-content: center;
            height: 79px;
            margin-bottom: 20px;
            img{
                width: 33px;
                height: 36px;
                margin-right: 10px;
            }
        }
        .form .el-col .el-form .el-form-item{
            margin-bottom: 30px;
            ::v-deep .el-input .el-input__wrapper .el-input__prefix{
                font-size: 18px;
            }
            .YZM{
                position: absolute;
                right: 10px;
            }
        }
        .minilogin{
            margin-top: 40px;
        }
    }
}
}
</style>